<span page-title>{{ 'Create Host Collection' | translate }}</span>

<div data-extend-template="layouts/details-page-with-breadcrumbs.html">
  <header data-block="header">
    <h2 translate>Create Host Collection</h2>
  </header>

  <div data-block="content" class="row">
    <form name="hostCollectionForm" class="col-sm-5" novalidate role="form">
      <div bst-form-group label="{{ 'Name' | translate }}">
        <input id="name"
               name="name"
               ng-model="hostCollection.name"
               type="text"
               tabindex="1"
               autofocus
               required/>
      </div>

      <div class="checkbox">
        <label>
          <input type="checkbox" name="limit" ng-model="hostCollection.unlimited_hosts"/>
          <span translate>Unlimited Hosts</span>
        </label>

      </div>

      <div bst-form-group label="{{ 'Limit' | translate }}" ng-hide="hostCollection.unlimited_hosts" field="max_hosts">
        <input id="max_hosts"
               name="max_hosts"
               class="form-control"
               ng-model="hostCollection.max_hosts"
               ng-required="!hostCollection.unlimited_hosts"
               type="number"
               min="1"
               tabindex="2"/>
      </div>

      <div bst-form-group label="{{ 'Description' | translate }}">
        <textarea id="description"
                  name="description"
                  ng-model="hostCollection.description"
                  tabindex="3">
        </textarea>
      </div>

      <div bst-form-buttons
           on-cancel="transitionTo('host-collections')"
           on-save="save(hostCollection)"
           working="working">
      </div>
    </form>
  </div>
</div>
